<template>
  <view class="glo-input">
    <view class="input-mask" v-if="showSelect" @click="(e) => handlerOperation('select', e)"></view>
    <input :confirm-type="confirmType" :placeholder="placeholder" :value="modelValue" class="input-content"
      :placeholder-style="`color: ${colorPrimary};`" :type="type" @blur="(e) => handlerOperation('blur', e)"
      @confirm="(e) => handlerOperation('search', e)" @input="(e) => handlerOperation('change', e)" />
    <up-icon v-if="clearable && modelValue && !showSelect" :color="colorPrimary" name="close-circle-fill" size="30rpx"
      @click="(e) => handlerOperation('clear', e)"></up-icon>
    <image v-if="showScan" class="input-sm" src="/static/imgs/ic_saoma_1.png"
      @click="(e) => handlerOperation('scan', e)"></image>
    <up-icon v-if="showSelect" name="arrow-right" :color="colorPrimary" size="30rpx"></up-icon>
  </view>
</template>
<script setup>
import config from "@/commons/config.js";
const colorPrimary = ref(config.colorPrimary)

const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  placeholder: {
    type: String,
    default: "请输入",
  },
  clearable: {
    type: Boolean,
    default: true,
  },
  showScan: {
    type: Boolean,
    default: false,
  },
  showSelect: {
    type: Boolean,
    default: false,
  },
  confirmType: {
    type: String,
    default: "search",
  },
  type: {
    type: String,
    default: "text",
  },
});
const emits = defineEmits([
  "update:modelValue",
  "search",
  "blur",
  "scan",
  "select",
  "clear",
]);
const handlerOperation = (type, e) => {
  switch (type) {
    case "change":
      emits("update:modelValue", e.detail.value);
      break;
    case "search":
      emits("operation", "search");
      break;
    case "blur":
      emits("operation", "blur");
      break;
    case "scan":
      emits("operation", "scan");
      break;
    case "select":
      emits("operation", "select");
      break;
    case "clear":
      emits("update:modelValue", "");
      emits("operation", "clear");
      break;
  }
};
</script>
<style lang="scss" scoped>
.glo-input {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20rpx;
  padding: 0 25rpx;
  width: 100%;
  height: 60rpx;
  border-radius: 8rpx;
  background: #e7effe;
  font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
  line-height: 60rpx;

  .input-mask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  .input-content {
    flex: 1;
    color: #498cff;
    font-weight: 400;
    font-size: 26rpx;
  }

  .input-sm {
    width: 30rpx;
    height: 30rpx;
  }
}
</style>
